<template>
  <el-row>
    <el-col :span='4' :push='2'>
      <el-card class='box-card' :body-style="{padding: '5px'}">
        <el-avatar id='my_head_photo'
                   class='img-responsive center-block'
                   :src=mechanismAvatar
                   :size='230'
                   shape='square'
                   alt='我的头像'>
        </el-avatar>
        <hr>
        <div>
          <p style='font-size: 18px; font-weight: 700;text-align: center;margin: 0 0 10px;'>{{ mechanismName }}</p>
          <ul class='tree-list'>
            <li>
              <p class='item-tt'>好评度</p>
              <span class='item-num'>98%</span>
            </li>
            <li>
              <p class='item-tt'>课程数</p>
              <span class='item-num js-item-num' data-num='31'>31</span>
            </li>
            <li>
              <p class='item-tt'>学习人次</p>
              <span class='item-num js-item-num' data-num='26941'>2万</span>
            </li>
          </ul>
          <hr>
          <p style='font-size: 14px; text-align: center;margin: 0 0 10px;'>{{ mechanismDetails }}</p>
        </div>
        <hr>
      </el-card>
    </el-col>
    <el-col :span='14' :push='3'>
      <el-tabs type='border-card' v-model='activeName' @tab-click='handleClick'>
        <el-tab-pane name='details' label='课程概述'>
          <ul class='teacher-list' style='left: 15px'>
            <left-right-swiper-scroll v-if='isLoading'>
              <li class='teacher-item' v-for='item in teacherList' :key='item.teacherId'>
                <el-avatar class='teacher-avatar'
                           :src=item.teacherAvatar
                           :size='100'
                           shape='circle'
                           alt='我的头像'>
                </el-avatar>
                <div class='text-right'>
                  <h4 class='teacher-name'>
                    <a href='#' target='_blank'>{{ item.teacherName }}</a>
                  </h4>
                  <div class='teacher-intro' :title='item.teacherIntro'>{{ item.teacherIntro }}</div>
                </div>
              </li>
            </left-right-swiper-scroll>
          </ul>
          <p>s</p>
          <p>s</p>
          <p>s</p>
          <p>s</p>
          <p>s</p>
          <p>s</p>
          <p>s</p>
          <p>s</p>
          <p>s</p>
        </el-tab-pane>
        <el-tab-pane name='menu' label='目录'>
        </el-tab-pane>
        <el-tab-pane name='share' label='分享'></el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import LeftRightSwiperScroll from './LeftRightSwiperScroll';

export default {
  name: 'JudgeInfo',
  components: {
    LeftRightSwiperScroll
  },
  data() {
    return {
      isLoading: true,
      activeName: 'details',
      mechanismName: '图云教育',
      mechanismAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
      mechanismDetails:
        '六星设计课堂是六星教育旗下的在线精品课程，专注于从事平面设计、播音主持、声乐、摄影后期、影视后期、原画、插画、商业插画、3D模型、国画、彩铅、素描等在线教育培训，精心创作100余门免费课程及若干门实战课程；与顶级互联网行业大会零距离接轨，以新潮学习体验颠覆传统教育模式，打造互联网在线教育明星品牌。',
      teacherList: [
        {
          teacherId: 1,
          teacherName: '蔡泳信',
          teacherAvatar: '',
          teacherIntro: '南方机构初级讲师'
        }, {
          teacherId: 2,
          teacherName: '杨涛',
          teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
          teacherIntro: '南方机构高级后端工程师，拥有十年架构经验'
        }, {
          teacherId: 3,
          teacherName: 'cyx',
          teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
          teacherIntro: 'cyx yyds'
        }, {
          teacherId: 4,
          teacherName: 'cyx',
          teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
          teacherIntro: 'cyx yyds'
        }, {
          teacherId: 5,
          teacherName: 'cyx',
          teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
          teacherIntro: 'cyx yyds'
        }, {
          teacherId: 6,
          teacherName: 'cyx',
          teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
          teacherIntro: 'cyx yyds'
        }, {
          teacherId: 7,
          teacherName: 'cyx',
          teacherAvatar: 'https://cdn.acwing.com/media/user/profile/photo/71847_lg_f844104f10.jpg',
          teacherIntro: 'cyx yyds'
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      switch (tab.name) {
        case 'details':
          // 获取数据
          break;
        case 'menu':
          break;
        case 'share':
          break;
      }
    }
  },
  watch: {
    'activeName'(val) { //监听切换状态-计划单 // 注释，根据val的不同，跳转到不同
      let name;
      switch (val) {
        case 'details':
          name = `user-space-record`;
          break;
        case 'share':
          name = `user-space-solution`;
          break;
        case 'menu':
          name = `user-space-blog`;
          break;
      }
      console.log(name);
      // 我的写法是每一个tab一个文件 如果不需要前进后退的话就不用push了
      this.$router.push({
        name: name,
        params: { userID: this.user.id }
      });
    }
  }
};
</script>

<style scoped>
.tree-list {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.tree-list li .item-num {
  color: #999;
}

.tree-list li:first-child {
  border-left: none;
}

.tree-list li {
  display: table-cell;
  border-left: 1px solid #e5e5e5;
  text-align: center;
}

p {
  margin: 0;
}

.teacher-avatar {
  float: left;
  margin-right: 20px;
}

.teacher-list {
  width: 100%;
  white-space: nowrap;
  position: relative;
  margin-left: -15px;
  font-size: 0;
}

li, ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none outside none;
}

.teacher-item {
  display: inline-block;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 235px;
  margin-left: 30px;
}

.teacher-name {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-wrap: normal;
}

.teacher-list .teacher-item .teacher-name {
  color: #23b8ff;
  font-size: 16px;
  margin-bottom: 10px;
}

.teacher-list .teacher-item .teacher-intro {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

.teacher-list .teacher-item .teacher-intro {
  max-height: 63px;
  font-size: 14px;
  overflow: hidden;
}
</style>
